<template>
    <Card style="margin-bottom: 20px; padding-bottom: 20px" class="data-card">
        <!-- {{data}}88 -->
        <div slot="title">
            <div class="card-title">
                <p>采购合同号：{{data.purchasingAgreementCode}}<span class="order-status" :class="'order-status' + data.orderStatus ">{{ getStatusName(data.orderStatus) }}</span></p>
                <p class="flex-class"><img src="../../assets/images/order/matType.png" width="16" style="margin-right: 5px">合同类型：<span>{{ $utils.handleDictData(data.businessType, dictInfo.businessType) }}</span></p>
                <p class="flex-class"><img src="../../assets/images/order/matType.png" width="16" style="margin-right: 5px"> 品类：<span>{{ getMatTypeName(data.agmtTypeName) }}</span></p>
                <p class="flex-class"><img src="../../assets/images/order/weight.png" width="16" style="margin-right: 5px">重量(KGS)：<span>{{ data.goodsWeight }}</span></p>
                <p class="flex-class"><img src="../../assets/images/order/amount.png" width="16" style="margin-right: 5px">金额：<span>￥{{ data.agmtGoodsTotalAmountEstimateStandardCurrency.toLocaleString() }}</span></p>
            </div>
            <div class="overdue" v-if="data.contractValidityPeriodEnd && (data.contractValidityPeriodEnd  + 24 * 60 * 60 * 1000 - 1) < (new Date(new Date()).getTime())">
                超期
            </div>
        </div>
        <div class="card-content">
            <Row class="card-word">
                 <i-col span="4">
                    <p>
                        来源：<span>{{ data.orderSource == 0 ? '平台端':'客户端'  }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        委托协议号：<span>{{ data.agencyName }}</span>
                    </p>
                </i-col>
                <i-col span="7">
                    <p>
                        货源方：<span>{{ $utils.handleDictData(data.entrustedEnterprise, dictInfo.customerId) }}</span>
                    </p>
                </i-col>
                <i-col span="7">
                    <p>
                        合同期限：<span>{{ $utils.timestampToDate(data.contractValidityPeriodStart) }}至{{ $utils.timestampToDate(data.contractValidityPeriodEnd) }}</span>
                    </p>
                </i-col>
                <i-col span="2" style="text-align: right;color: #4F68E8;">
                    <Dropdown @on-click="moreClick" transfer>
                        <p class="speedOfProgress">
                            更多<Icon type="ios-arrow-down" />
                        </p>
                        <DropdownMenu slot="list">
                            <DropdownItem name="release">解押申请</DropdownItem>
                            <DropdownItem name="feeInfo">费用信息</DropdownItem>
                            <DropdownItem name="seeedit">查看编辑</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </i-col>
            </Row>

            <Row style="margin-top: 25px; margin-bottom: 20px" class="card-word">
                <i-col span="4">
                    <p>
                        支付方式：<span>{{ data.payMethod }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        保证金：<span>￥{{ $utils.getMillimeter(data.agmtEarnestAmountEstimate) }}({{ data.earnestAmountRate }}%)</span>
                    </p>
                </i-col>
                <i-col span="6">
                    <p>
                        综合服务费：<span>￥{{ $utils.getMillimeter(data.agmtAgencyFeesAmountEstimate) }}({{ data.agencyFeesRate }}%)</span>
                    </p>
                </i-col>
                <i-col span="10" style="text-align: right;color: #4F68E8;">
                    <p class="speedOfProgress" @click="speedOfProgressClick">
                        进度<Icon type="ios-arrow-down" :class="arrowClass" />
                    </p>
                </i-col>
            </Row>
            <el-collapse-transition>
                <div v-if="speedOfProgressShow">
                    <Row style="padding-top: 25px; padding-bottom: 20px" class="card-word">
                        <i-col span="10">
                            <p>
                                业务进度：
                            </p>
                        </i-col>
                    </Row>
                    <Row type="flex" :gutter="10" style="padding-top: 25px; padding-bottom: 20px;flex-wrap: wrap" class="card-word">
                        <i-col span="8">
                            <div class="business-progress">
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        在库货值
                                    </i-col>
                                    <i-col span="12" style="text-align: right;color: rgba(79, 104, 232, 1);cursor: pointer">
<!--                                        待付解押款<Icon type="ios-arrow-forward" />-->
                                    </i-col>
                                </Row>
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        <span style="color: rgba(0, 0, 0, 0.85);font-size: 18px; font-weight: 700;">{{ data.inStockValue.toLocaleString() }}</span> 元
                                    </i-col>
                                </Row>
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        到单/合同 <span class="font-weight-bold">{{ data.amountToOrder.toLocaleString() }}/{{ data.agmtGoodsTotalAmountEstimateStandardCurrency.toLocaleString() }}元</span>
                                    </i-col>
                                    <i-col span="12">
                                        已解押 <span class="font-weight-bold">{{ data.releasedAmount.toLocaleString() }}元</span>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col span="12">
                                        已付代理费 <span class="font-weight-bold">{{ data.agencyFeePaid.toLocaleString() }}元</span>
                                    </i-col>
                                    <i-col span="12">
                                        已付其他共计 <span class="font-weight-bold">{{ data.otherFeeTotal.toLocaleString() }}元</span>
                                    </i-col>
                                </Row>
                            </div>
                        </i-col>
                        <i-col span="8">
                            <div class="business-progress">
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        待结供货尾款
                                    </i-col>
                                </Row>
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        <span style="color: rgba(0, 0, 0, 0.85);font-size: 18px; font-weight: 700;">{{ data.finalPayment.toLocaleString() }}</span> 元
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col span="12">
                                        已预付 <span class="font-weight-bold">{{ data.prepaidFinalPayment.toLocaleString() }}元</span>
                                    </i-col>
                                    <i-col span="12">
                                        待结预付 <span class="font-weight-bold">{{ data.pendingPrepay.toLocaleString() }}元</span>
                                    </i-col>
                                </Row>
                            </div>

                        </i-col>
                        <i-col span="8">
                            <div class="business-progress">
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        保证金
                                    </i-col>
                                </Row>
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        <span style="color: rgba(0, 0, 0, 0.85);font-size: 18px; font-weight: 700;">{{ data.agmtEarnestAmountEstimate.toLocaleString() }}</span> 元
                                    </i-col>
                                </Row>
                                <Row style="margin-bottom: 5px">
                                    <i-col span="12">
                                        已预收 <span class="font-weight-bold">{{ data.marginAdvance.toLocaleString() }}元</span>
                                    </i-col>
                                    <i-col span="12">
                                        已抵扣 <span class="font-weight-bold">{{ data.earnestDeductMoney.toLocaleString() }}元</span>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col span="12">
                                        待结预收 <span class="font-weight-bold">{{ data.toBeSettledInAdvance.toLocaleString() }}元</span>
                                    </i-col>
                                </Row>
                            </div>
                        </i-col>
                    </Row>
                    <Row style="padding-top: 25px; padding-bottom: 20px" class="card-word">
                        <i-col span="10">
                            <i-col span="14">
                                <p>
                                    货物进度：
                                </p>
                            </i-col>
                        </i-col>
                    </Row>
                    <div class="circle-container" style="padding-left: 30px">
                        <Row type="flex" align="middle">
                            <i-col span="4" style="width: 100%;display: flex;align-items: center">
                                <div style="position: relative;">
                                    <el-tooltip placement="top" :disabled="data.contractWeight == 0">
                                        <i-circle :percent="100" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                            <p class="demo-Circle-inner">合同</p>
                                        </i-circle>
                                        <div slot="content">
                                            <p v-if="item.weight" v-for="(item, index) in data.contractWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                        </div>
                                    </el-tooltip>
                                    <p class="circle-title"><span>{{ data.contractWeight }}</span>KGS</p>
                                </div>

                                <div class="connecting-line" style="width: calc(100% - 60px);">
                                    <el-tooltip v-if="data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase'" placement="top" :disabled="data.orderNotReceivedWeight == 0">
                                        <connecting-line-node top-text="未到单" :bottom-text="data.orderNotReceivedWeight + 'KGS'" />
                                        <div slot="content">
                                            <p v-if="item.weight" v-for="(item, index) in data.orderNotReceivedWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                        </div>
                                    </el-tooltip>
                                </div>
                            </i-col>

                            <i-col span="7" style="width: 100%;display: flex;align-items: center">
                                <div style="position: relative">
                                    <el-tooltip placement="top" :disabled="data.toOrderContractWeightSum == 0">
                                        <i-circle :percent="100" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                            <p class="demo-Circle-inner">{{ data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase' ? '到单' : '未质押' }}</p>
                                        </i-circle>
                                        <div slot="content">
                                            <p v-if="item.weight" v-for="(item, index) in data.toOrderContractWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                        </div>
                                    </el-tooltip>
                                    <p class="circle-title"><span>{{ data.toOrderContractWeightSum }}</span>KGS</p>
                                </div>

                                <div class="connecting-line" style="width: calc(100% - 60px);">

                                    <div v-if="data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase'" v-for="(item, index) in data.tpredictDateWeightMaps" :key="index">
                                        <el-tooltip placement="top" :disabled="item.weight == 0">
                                            <connecting-line-node :top-text="`预计${item.category}到港`" :bottom-text="`${item.weight}KGS`" />
                                            <div slot="content">
                                                <p v-if="item.weight" v-for="(timeItem, index2) in getDataByDate(data.categoryTpredictDateWeightMaps, item.category)" :key="index2">{{ getMatTypeName(timeItem.category) }}: {{ timeItem.weight }}KGS</p>
                                            </div>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </i-col>

                            <i-col span="7" style="width: 100%;display: flex;align-items: center">
                                <div style="position: relative">
                                    <el-tooltip placement="top" :disabled="data.actualArriveAtPortWeight == 0">
                                        <i-circle :percent="100" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                            <p class="demo-Circle-inner">{{ data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase' ? '到港' : '质押' }}</p>
                                        </i-circle>
                                        <div slot="content">
                                            <p v-if="item.weight" v-for="(item, index) in data.actualArriveAtPortWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                        </div>
                                    </el-tooltip>
                                    <p class="circle-title"><span>{{ data.actualArriveAtPortWeight }}</span>KGS</p>
                                </div>

                                <div class="connecting-line" style="width: calc(100% - 60px);justify-content: start">
                                    <template v-if="data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase'">
                                        <el-tooltip placement="top" :disabled="data.notPutRowWeight == 0">
                                            <connecting-line-node top-text="未放行" :bottom-text="data.notPutRowWeight + 'KGS'" style="padding-right: 20px; width: 20%;" />
                                            <div slot="content">
                                                <p v-if="item.weight" v-for="(item, index) in data.notPutRowWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                            </div>
                                        </el-tooltip>
                                        <el-tooltip placement="top" :disabled="data.notInStockPortWeight == 0">
                                            <connecting-line-node top-text="已放行未入库" :bottom-text="data.notInStockPortWeight + 'KGS'" style="width: 20%;" />
                                            <div slot="content">
                                                <p v-if="item.weight" v-for="(item, index) in data.notInStockPortWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                            </div>
                                        </el-tooltip>
                                    </template>
                                </div>
                            </i-col>

                            <i-col span="4" style="width: 100%;display: flex;align-items: center">
                                <div style="position: relative">
                                    <el-tooltip placement="top" :disabled="data.warehousingWeight == 0">
                                        <i-circle :percent="100" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                            <p class="demo-Circle-inner">{{ data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase' ? '入库' : '未放货' }}</p>
                                        </i-circle>
                                        <div slot="content">
                                            <p v-if="item.weight" v-for="(item, index) in data.warehousingWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                        </div>
                                    </el-tooltip>
                                    <p class="circle-title"><span>{{ data.warehousingWeight }}</span>KGS</p>
                                </div>

                                <div class="connecting-line" style="width: calc(100% - 60px);">
                                    <el-tooltip v-if="data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase'" placement="top" :disabled="data.notReleasedWeight == 0">
                                        <connecting-line-node top-text="未放货" :bottom-text="data.notReleasedWeight + 'KGS'" />
                                        <div slot="content">
                                            <p v-if="item.weight" v-for="(item, index) in data.notReleasedWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                        </div>
                                    </el-tooltip>
                                </div>
                            </i-col>

                            <i-col span="1" style="width: 100%;display: flex;align-items: center">
                                <div style="position: relative">
                                    <el-tooltip placement="top" :disabled="data.releaseWeight == 0">
                                        <i-circle :percent="100" stroke-color="#4f68e8" trail-color="#c4cef3" :size="60" :stroke-width="8" :trail-width="9">
                                            <p class="demo-Circle-inner">放货</p>
                                        </i-circle>
                                        <div slot="content">
                                            <p v-if="item.weight" v-for="(item, index) in data.releaseWeightMaps" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                        </div>
                                    </el-tooltip>
                                    <p class="circle-title"><span>{{ data.releaseWeight }}</span>KGS</p>
                                </div>
                            </i-col>
                        </Row>

                        <Row v-if="data.businessType === 'internalAgentPurchase' || data.businessType === 'abroadPurchase'" type="flex" align="start" style="padding-top: 30px;padding-bottom: 10px">
                            <i-col span="4" style="width: 100%;display: flex;align-items: center">
                            </i-col>

                            <i-col span="7" style="width: 100%;display: flex;align-items: center">
                            </i-col>

                            <i-col span="7" style="width: 100%;">
                                <el-collapse-transition>
                                    <div v-if="arrivalShow" style="padding-bottom: 35px">
                                        <div class="broken-line" v-for="(item, index) in data.arrivalMaps" :key="index">
                                            <div class="title">
                                                <p>{{ item.category }}</p>
                                                <p><span>{{ item.weight }}KGS</span></p>
                                            </div>
                                            <div class="connecting-line" style="width: 50%; position: absolute; bottom: 0px; justify-content: start">

                                                <el-tooltip placement="top" :disabled="getDataByPort(data.arrivalMaps, item.category).weight == 0">
                                                    <connecting-line-node top-text="" bottom-text="" style="position: absolute; left: -7px; z-index: 1000" />
                                                    <div slot="content">
                                                        <p v-if="item.weight" v-for="(item, index) in getDataByPort(data.arrivalMaps, item.category).data" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                                    </div>
                                                </el-tooltip>

                                                <el-tooltip placement="top" :disabled="getDataByPort(data.notReleasedMaps, item.category).weight == 0">
                                                    <connecting-line-node top-text="" :bottom-text="getDataByPort(data.notReleasedMaps, item.category).weight + 'KGS'" style="padding-left: 29px; padding-right: 20px; width: calc(40% + 20px)" />
                                                    <div slot="content">
                                                        <p v-if="item.weight" v-for="(item, index) in getDataByPort(data.notReleasedMaps, item.category).data" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                                    </div>
                                                </el-tooltip>

                                                <el-tooltip placement="top" :disabled="getDataByPort(data.notInStockMaps, item.category).weight == 0">
                                                    <connecting-line-node top-text="" :bottom-text="getDataByPort(data.notInStockMaps, item.category).weight + 'KGS'" style="width: calc(40% - 20px)" />
                                                    <div slot="content">
                                                        <p v-if="item.weight" v-for="(item, index) in getDataByPort(data.notInStockMaps, item.category).data" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                                    </div>
                                                </el-tooltip>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-transition>
                                <div class="broken-line-btn" @click="arrivalProgressClick">{{ arrivalShow ? '收起' : '展开' }}<Icon type="ios-arrow-down" :class="arrivalArrowClass" /></div>
                            </i-col>

                            <i-col span="4" style="width: 100%;">
                                <el-collapse-transition>
                                    <div v-if="warehousingShow" style="padding-bottom: 35px">
                                        <div class="broken-line" v-for="(item, index) in data.warehousingMaps" :key="index">
                                            <div class="title">
                                                <p>{{ item.category }}</p>
                                                <p><span>{{ item.weight }}KGS</span></p>
                                            </div>
                                            <div class="connecting-line" style="width: 100%; position: absolute; bottom: 0; justify-content: center">
                                                <el-tooltip placement="top" :disabled="getDataByPort(data.warehousingMaps, item.category).weight == 0">
                                                    <connecting-line-node top-text="" bottom-text="" style="position: absolute; left: -7px; z-index: 1000" />
                                                    <div slot="content">
                                                        <p v-if="item.weight" v-for="(item, index) in getDataByPort(data.warehousingMaps, item.category).data" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                                    </div>
                                                </el-tooltip>

                                                <el-tooltip placement="top" :disabled="getDataByPort(data.notReleasedPortMaps, item.category).weight == 0">
                                                    <connecting-line-node top-text="" :bottom-text="getDataByPort(data.notReleasedPortMaps, item.category).weight + 'KGS'" style="padding-left: 29px; padding-right: 20px; width: calc(40% + 20px)" />
                                                    <div slot="content">
                                                        <p v-if="item.weight" v-for="(item, index) in getDataByPort(data.notReleasedPortMaps, item.category).data" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                                    </div>
                                                </el-tooltip>

                                                <el-tooltip placement="top" :disabled="getDataByPort(data.releasedPortMaps, item.category).weight == 0">
                                                    <connecting-line-node top-text="" :bottom-text="getDataByPort(data.releasedPortMaps, item.category).weight + 'KGS'" style="position: absolute; right: -25px" />
                                                    <div slot="content">
                                                        <p v-if="item.weight" v-for="(item, index) in getDataByPort(data.releasedPortMaps, item.category).data" :key="index">{{ getMatTypeName(item.category) }}: {{ item.weight }}KGS</p>
                                                    </div>
                                                </el-tooltip>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-transition>
                                <div class="broken-line-btn" @click="warehousingProgressClick">{{ warehousingShow ? '收起' : '展开' }}<Icon type="ios-arrow-down" :class="warehousingArrowClass" /></div>
                            </i-col>
                        </Row>
                    </div>
                </div>
            </el-collapse-transition>
        </div>
    </Card>
</template>

<script>
import _ from 'lodash';
import ConnectingLineNode from './component/connecting-line-node';
export default {
    name: 'dataCard',
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        dictInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    components: {
        ConnectingLineNode
    },
    data() {
        return {
            speedOfProgressShow: false,
            arrivalShow: false,
            warehousingShow: false,
            arrowClass: '',
            arrivalArrowClass: '',
            warehousingArrowClass: '',
            statusList: [
                {
                    text: '草稿',
                    value: '0'
                },
                {
                    text: '审批中',
                    value: '1'
                },
                {
                    text: '被拒收',
                    value: '2'
                },
                {
                    text: '执行中',
                    value: '3'
                },
                {
                    text: '完成',
                    value: '4'
                },
                {
                    text: '异常完结审批中',
                    value: '5'
                },
                {
                    text: '异常完结',
                    value: '6'
                },
                {
                    text: '已完结',
                    value: '7'
                },
                {
                    text: '已提交',
                    value: '8'
                },
                {
                    text: '已接收',
                    value: '9'
                },
                {
                    text: '被拒收',
                    value: '10'
                }
            ]
        };
    },
    methods: {
        speedOfProgressClick() {
            this.speedOfProgressShow = !this.speedOfProgressShow;
            if (this.speedOfProgressShow) {
                this.arrowClass = 'top-arrow';
            } else {
                this.arrowClass = 'bottom-arrow';
            }
        },
        arrivalProgressClick() {
            this.arrivalShow = !this.arrivalShow;
            if (this.arrivalShow) {
                this.arrivalArrowClass = 'top-arrow';
            } else {
                this.arrivalArrowClass = 'bottom-arrow';
            }
        },
        warehousingProgressClick() {
            this.warehousingShow = !this.warehousingShow;
            if (this.warehousingShow) {
                this.warehousingArrowClass = 'top-arrow';
            } else {
                this.warehousingArrowClass = 'bottom-arrow';
            }
        },
        getMatTypeName(matTypeStr) {
            if (matTypeStr) {
                let matTypeCodeList = matTypeStr.split(',');
                return  _.uniq(matTypeCodeList).map(x => this.$utils.handleDictData(x, this.dictInfo.matType)).join(',');
            } else {
                return '';
            }
        },
        getStatusName(status) {
            if (status) {
                let currentStatus = this.statusList.filter(x => x.value == status);
                return currentStatus && currentStatus.length > 0 ? currentStatus[0].text : '';
            }
            return '';
        },
        moreClick(name) {
            if (name === 'feeInfo') {
                let financeAuth = true;
                if (this.data.createdBy === this.$utils.getUserInfo().id) {
                    financeAuth = true;
                }
                this.$router.push({
                    path: '/platformApp/fee-info',
                    query: {
                        businessKey: this.data.orderNum,
                        businessType: '1',
                        bustype: this.data.businessType,
                        financeAuth
                    }
                });
            }
            if(name === 'release'){
                this.$router.push({
                    path: '/platformApp/TransOrder',
                    query: {
                        orderNo: this.data.orderNum
                    }
                });
            }
            if(name === 'seeedit'){
                if (this.data.orderStatus == 0 || this.data.orderStatus == 10 ) {
                    this.editItem()
                } else {
                    this.readItem();
                }
            }
        },
         editItem() {
               this.$router.push({ path: '/platformApp/order-add',
                query: {
                    label: `订单${this.data.orderNum}`,
                    key: this.data.orderNum,
                    companyId: this.data.companyId,
                    disabled: false,
                    showBtn: true,
                    businessType: this.data.businessType,
                    ViewandEdit:true,
                    saveshow:true
                }})
        },
        readItem() {
            this.$router.push({
                path: '/platformApp/order-add',
                query: {
                    label: `订单${this.data.orderNum}`,
                    key: this.data.orderNum,
                    disabled: true,
                    showBtn: false,
                    businessType: this.data.businessType,
                    ViewandEdit:false,
                    saveshow:false,
                    companyId: this.data.companyId,
                }
            })
        },
        getDataByPort(list, key) {
            if (list && list.length > 0) {
                let data = list.filter(x => x.category === key);
                if (data && data.length > 0) {
                    return data[0];
                }
            }
            return {weight: 0}
        },
        getDataByDate(list, key) {
            if (list && list.length > 0) {
                let data = list.filter(x => x.date === key);
                if (data && data.length > 0) {
                    console.log(data);
                    return data;
                }
            }
            return [];
        }
    }
};
</script>

<style lang="less">
.order-query {
    .ivu-tooltip-inner {
        background-color: rgba(70, 76, 91, 0.6)!important;
        font-weight: normal!important;
    }
    .ivu-tooltip-arrow {
        border-bottom-color: rgba(70, 76, 91, 0.6)!important;
    }
}
</style>
<style scoped lang="less">
.flex-class {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title {
    display: flex;
    width: 80%;
    text-align: center;
    height: 30px;
    p {
        border-right: 1px solid #d9d9d9;
        height: 30px;
        line-height: 30px;
        span {
            font-weight: normal;
        }
    }
    p:first-child {
        text-align: left;
    }
    p:first-child, p:last-child {
        border: none;
    }
}

.card-word {
    p {
        font-weight: 700;

        span {
            font-weight: 500;
        }
    }
}

.connecting-line {
    height: 2px;
    background-color: #4f68e8;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.circle-container {
    //display: flex;
    //justify-content: space-between;
    color: #4d66e2;
    font-size: 15px;
    .left-circle, .right-circle {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-left: 30px;
    }
    .right-circle {
        padding-right: 60px;
    }
    .left-circle-container {
        width: 90%;
    }
    .right-circle-container {
        width: 66%;
    }

    .circle-title {
        overflow-wrap: break-word;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        text-align: center;
        position: absolute;
        width: 150px;
        left: -30px;

        span {
            font-weight: 700;
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
        }
    }
}
@keyframes arrowChange {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes arrowChange2 {
    100% {
        transform: rotate(0);
    }
}
.speedOfProgress {
    cursor: pointer;
    font-weight: normal !important;
}
.top-arrow {
    animation: arrowChange .5s;
    animation-fill-mode: forwards;
    transform: rotate(0);
}
.bottom-arrow {
    animation: arrowChange2 .5s;
    animation-fill-mode: forwards;
    transform: rotate(180deg);
}
.order-status {
    display: inline-block;
    width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-left: 20px;
    border-radius: 3px;
}
.order-status0 {
    background-color: #cfd2d8;
    color: #fff;
}
.order-status1 {
    background-color: #52bb86;
    color: #fff;
}
.order-status2 {
    background-color: #ff3333;
    color: #fff;
}
.order-status3 {
    background-color: #ffc803;
    color: #fff;
}
.order-status4 {
    background-color: #4fcb8d;
    color: #fff;
}
.order-status5 {
    background-color: #ff8888;
    color: #fff;
}
.order-status6 {
    background-color: #ff7979;
    color: #fff;
}
.order-status7 {
    background-color: #33bee6;
    color: #fff;
}
.order-status8 {
    background-color: #33bee6;
    color: #fff;
}
.order-status9 {
    background-color: #f68f42;
    color: #fff;
}
.order-status10 {
    background-color: #ff5533;
    color: #fff;
}

.broken-line {
    width: 100%;
    height: 60px;
    border-left: 2px solid #4f68e8;
    margin-left: 29px;
    position: relative;

    .title {
        position: absolute;
        right: 100%;
        bottom: 0;
        padding-right: 10px;
        word-break: keep-all;

        p {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 0.45);
            font-size: 12px;
            white-space: nowrap;
        }
        span {
            color: rgba(0, 0, 0, 0.85);
        }
    }
}

.broken-line-btn {
    padding-left: 5px;
    cursor: pointer;
    width: 60px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid rgba(79, 104, 232, 1);
    overflow-wrap: break-word;
    color: rgba(79, 104, 232, 1);
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    line-height: 24px;
}

.business-progress {
    height: 100%;
    border-radius: 4px;
    background-color: rgba(244, 247, 250, 1);
    padding: 20px;

    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    white-space: nowrap;
}

.font-weight-bold {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
}

.overdue {
    width: 92px;
    height: 32px;
    background-color: rgba(214, 3, 3, 1);
    border-bottom-left-radius: 50px;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    text-align: center;
    line-height: 32px;
}
</style>
